<% presenter = Users::Sessions::NewPresenter.new(self) %>
<% content_for(:head) do %>
  <title><%= presenter.page_title %></title>
<% end %>
<div class="h-full py-10 bg-gray-50 md:py-24">
  <div class="container max-w-md p-6 mx-auto bg-white dark:bg-gray-100 dark:border dark:border-gray-300/25 rounded-lg shadow sm:py-8">
    <div class="text-lg font-semibold sm:text-xl">
      <%= t('.heading', school_name: presenter.school_name) %>
    </div>
    <% if presenter.oauth_host.present? %>
      <div class="flex flex-col items-center mt-6 space-y-4">
        <% presenter.providers.each do |provider| %>
          <a tabindex="1" class="grid w-full grid-cols-12 gap-4 px-4 py-2 transition bg-white border border-gray-200 dark:border-gray-300/70 rounded-lg shadow-sm md:grid-cols-6 hover:bg-gray-50 dark:hover:bg-gray-300/50 hover:shadow-md" href="<%= presenter.federated_login_url(provider) %>" rel="nofollow">
            <span class="flex items-center col-span-10 col-start-2 md:col-start-2 md:col-span-4">
              <span class="flex items-center w-5 h-5">
                <%= image_tag(presenter.icon_path(provider), alt: "#{provider.capitalize} icon", class: "#{provider == :github ? 'dark:invert' : ''}") %>
              </span>
              <span class="text-sm font-medium md:text-base ps-3">
                <%= presenter.button_text(provider) %>
              </span>
            </span>
          </a>
        <% end %>
      </div>
    <% end %>
    <% if presenter.oauth_host.present? %>
      <div class="mt-8 relative z-10 text-xs font-semibold text-center text-gray-600 before:bg-gray-300 before:absolute before:top-1/2 before:left-1/2 before:transform before:-translate-x-1/2 before:w-full before:h-px before:content-[''] before:-z-[1]">
        <span class="px-2 text-gray-400 dark:text-gray-600 bg-white dark:bg-gray-100">
          <%= t('.sign_in_options_separator') %>
        </span>
      </div>
    <% end %>
    <%= form_with(url: user_session_path, method: :post, local: true) do |f| %>
      <div class="mt-6">
        <label
          class="inline-block text-sm font-semibold tracking-wide text-gray-900" for="email">
          <%= t(".email_address") %>
        </label>
        <%= f.email_field :email, maxlength: 256, placeholder: 'john@example.com', required: true, class: 'block w-full h-10 px-4 py-2 mt-1 text-sm text-gray-800 border border-gray-300 rounded appearance-none focus:outline-none focus:bg-white focus:border-primary-400', tabindex: 2 %>
      </div>
      <div class="mt-3">
        <%= f.check_box :shared_device, required: false, tabindex: 3, class: "w-4 h-4 border border-gray-300 rounded checkbox-input text-primary-500 focus:ring-focusColor-500", id: "shared_device" %>
        <label class="checkbox-label ps-1.5 cursor-pointer text-xs" for="shared_device">
          <%= t(".shared_device") %>
        </label>
        <span data-re-component="HelpIcon" data-re-json='<%= {children: t(".shared_device_help"), className: 'ms-2 text-sm', responsiveAlignment: 'rrc'}.to_json %>'></span>
      </div>
      <%= render 'shared/recaptcha', v2: @show_checkbox_recaptcha, action: 'user_magic_link_request' %>
      <div class="mt-4">
        <%= f.submit t(".continue_with_email"), name: 'email_link', data: { disable: true }, class: "w-full font-medium text-center btn btn-primary btn-large", tabindex: 4 %>
      </div>
    <% end %>
    <div class="flex p-4 mt-3 bg-gray-100 dark:bg-gray-200 border border-gray-100 rounded rtl:flex-row-reverse">
      <div class="flex items-center text-lg md:text-2xl">
        <i class="if i-key-light if-fw"></i>
      </div>
      <div class="text-xs ps-4">
        <%= t(".continue_with_email_help") %>
      </div>
    </div>
    <div class="mt-8 text-center">
      <a tabindex="5" href="/users/sign_in_with_password" class="p-3 text-sm font-medium underline rounded cursor-pointer text-primary-500 hover:bg-primary-50 dark:hover:bg-gray-300/50">
        <%= t('.sign_in_with_password') %>
      </a>
    </div>
  </div>
</div>
